<template>
  <el-container class="crouse-info">
    <el-header class="crouse-info-header" :height="headerHeight">
      <component :is="headeComponent" />
    </el-header>
    <scroll class="crouse-info-main">
      <div>
        <div class="crouse-info-main-wrap">
          <div class="title">
            <div class="shoucang">
              <span>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconunshoucang" />
                </svg>
                收藏
              </span>
            </div>
            <h1>力学-能量守恒精讲+深入练习</h1>
            <p>从基础开始，深入理解能量守恒定律</p>
          </div>
          <div class="price-info">
            <div class="time-price">￥&nbsp;21.00</div>
            <div class="info-bar">
              <span>时长</span>
              <span class="nodistance">20小时</span>
              <span>学习人数</span>
              <span class="nodistance">9455</span>
              <span>好评度</span>
              <span class="nodistance">99.5%</span>
            </div>
            <div class="btns">
              <a class="buy-btn">立即购买</a>
              <a @click="inCart" class="addcart">加入购物车</a>
            </div>
          </div>
          <nav class="nav-bar">
            <ul>
              <li>
                <a href="#introduction">课程介绍</a>
              </li>
              <li>
                <a href="#chapter">章节目录</a>
              </li>
              <li>
                <a href="#">售前咨询</a>
              </li>
              <li>
                <a href="#">用户评价</a>
              </li>
            </ul>
          </nav>
          <div class="content-container">
            <Introduction id="introduction" style="margin:50px auto" course_id="313322" />
            <Chapter @showPreview="togglePreview" id="chapter" style="margin:50px auto" />
            <Consultation style="margin:50px auto" />
            <Comment style="margin:50px auto" />
          </div>
        </div>
      </div>
    </scroll>
    <PreviewCrouse @close="togglePreview" v-if="previewIsShow" />
    <WindowMessageBox v-if="WindowMessageBoxIsShow" msg="加入成功" status="success" />
  </el-container>
</template>

<script>
import { Container, Header, Main } from "element-ui";
import WindowMessageBox from "../commonComponents/WindowMessageBox";
import Introduction from "./components/Introduction";
import Chapter from "./components/Chapter";
import Consultation from "./components/Consultation";
import Comment from "./components/Comment";
import MHeader from "../commonComponents/Header";
import SmallHeader from "../commonComponents/SmallScreenHeader_1";
import scroll from "../commonComponents/Scroll";
export default {
  data() {
    return {
      headeComponent: "MHeader",
      headerHeight: "70px",
      crouseId: "",
      previewIsShow: false,
      WindowMessageBoxIsShow: false
    };
  },
  components: {
    scroll,
    MHeader,
    WindowMessageBox,
    SmallHeader,
    ElContainer: Container,
    ElHeader: Header,
    ElMain: Main,
    Introduction,
    Consultation,
    Comment,
    Chapter,
    PreviewCrouse: () => import("./components/PreviewCrouse")
  },
  methods: {
    togglePreview() {
      this.previewIsShow = !this.previewIsShow;
    },
    inCart() {
      this.WindowMessageBoxIsShow = !this.WindowMessageBoxIsShow;
      setTimeout(() => {
        this.WindowMessageBoxIsShow = !this.WindowMessageBoxIsShow;
      }, 1500);
    }
  },
  created() {
    if (this.global.SCREEN_WIDTH <= 576) {
      this.headeComponent = "SmallHeader";
      this.headerHeight = "50px";
    }
  },
  mounted() {
    this.crouseId = this.$route.query.id;
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .crouse-info {
    width: 100%;
    margin: 0 auto;
    &-header {
      padding: 0;
    }
    &-main {
      &-wrap {
        margin: 0 auto;
        max-width: 1500px;
        .title {
          text-align: center;
          .shoucang {
            height: 50px;
            span {
              margin-left: 150px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              color: #666;
              cursor: pointer;
              transition: all 0.2s;
              .icon {
                width: 40px;
                height: 40px;
                margin-right: 10px;
              }
              &:hover {
                color: #333;
              }
            }
          }
          h1 {
            line-height: 50px;
            color: rgba(0, 0, 0, 0.75);
            /* text-shadow: 0 2px 4px rgba(28, 31, 33, 0.2); */
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 40px;
            margin-bottom: 10px;
          }
          p {
            line-height: 50px;
            color: rgba(0, 0, 0, 0.6);
            text-shadow: 0 2px 4px rgba(28, 31, 33, 0.1);
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
          }
        }
        .price-info {
          box-sizing: border-box;
          padding: 20px 30px;
          width: 80%;
          height: 120px;
          border-radius: 20px;
          margin: 40px auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
          .time-price {
            margin-bottom: 10px;
            width: 100%;
            font-size: 32px;
            color: #f01414;
            line-height: 32px;
            font-weight: 700;
          }
          .info-bar {
            width: 100%;
            span {
              font-size: 14px;
              color: #545c63;
              line-height: 24px;
              font-weight: 700;
              padding-right: 8px;
              &.nodistance {
                font-weight: 400;
                padding-right: 20px;
              }
            }
          }
          .btns {
            position: absolute;
            right: 0;
            .buy-btn {
              background: #f01414;
              border-radius: 28px;
              font-size: 16px;
              color: #fff;
              letter-spacing: 0;
              line-height: 24px;
              font-weight: 700;
              padding: 18px 48px;
              transition: all 0.3s;
              margin-right: 20px;
              cursor: pointer;
            }
            .addcart {
              cursor: pointer;
              background: rgba(240, 20, 20, 0.1);
              border-radius: 28px;
              font-size: 16px;
              color: #f20d0d;
              letter-spacing: 0;
              line-height: 24px;
              font-weight: 700;
              padding: 18px 48px;
              position: relative;
              transition: all 0.3s;
            }
          }
        }
        .nav-bar {
          width: 80%;
          height: 50px;
          margin: 20px auto;
          ul {
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            li {
              cursor: pointer;
              margin: 0 50px;
              a {
                font-weight: 700;
                font-size: 16px;
                line-height: 40px;
                color: #545c63;
                text-decoration: none;
                vertical-align: text-bottom;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
}
@media screen and (max-width: 992px) and (min-width: 768px) {
}
@media screen and (max-width: 768px) and (min-width: 576px) {
}
@media screen and (max-width: 576px) and (min-width: 320px) {
  .crouse-info {
    width: 100%;
    overflow: hidden;
    &-header {
      padding: 0;
    }
    &-main {
      height: calc(100vh - 50px);
      width: 100%;
      overflow: hidden;
      padding: 0;
      &-wrap {
        height: 100%;
        margin: 0 auto;
        /* overflow-y:scroll; */
        .title {
          margin-top: 30px;
          text-align: center;
          .shoucang {
            display: none;
          }
          h1 {
            line-height: 50px;
            color: rgba(0, 0, 0, 0.75);
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
            margin-bottom: 10px;
          }
          p {
            line-height: 20px;
            color: rgba(0, 0, 0, 0.6);
            text-shadow: 0 2px 4px rgba(28, 31, 33, 0.1);
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
          }
        }
        .price-info {
          box-sizing: border-box;
          padding: 5px;
          box-sizing: border-box;
          width: 100%;
          height: auto;
          border-radius: 20px;
          margin: 10px auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
          .time-price {
            margin-bottom: 10px;
            text-align: center;
            width: 100%;
            font-size: 22px;
            color: #f01414;
            line-height: 32px;
            font-weight: 700;
          }
          .info-bar {
            width: 100%;
            display: flex;
            justify-content: center;
            span {
              font-size: 14px;
              color: #545c63;
              line-height: 24px;
              font-weight: 700;
              padding-right: 8px;
              &.nodistance {
                font-weight: 400;
                padding-right: 20px;
              }
            }
          }
          .btns {
            margin-top: 20px;
            .buy-btn {
              background: #f01414;
              border-radius: 28px;
              font-size: 12px;
              color: #fff;
              letter-spacing: 0;
              line-height: 24px;
              font-weight: 700;
              padding: 10px 28px;
              transition: all 0.3s;
              margin-right: 20px;
            }
            .addcart {
              background: rgba(240, 20, 20, 0.1);
              border-radius: 28px;
              font-size: 12px;
              color: #f20d0d;
              letter-spacing: 0;
              line-height: 24px;
              font-weight: 700;
              padding: 10px 28px;
              position: relative;
              transition: all 0.3s;
            }
          }
        }
        .nav-bar {
          display: none;
        }
      }
    }
  }
}
@media screen and (max-width: 320px) {
  .crouse-info {
    width: 100%;
    overflow: hidden;
    &-header {
      padding: 0;
    }
    &-main {
      height: calc(100vh - 50px);
      width: 100%;
      overflow: hidden;
      padding: 0;
      &-wrap {
        height: 100%;
        margin: 0 auto;
        /* overflow-y:scroll; */
        .title {
          margin-top: 30px;
          text-align: center;
          .shoucang {
            display: none;
          }
          h1 {
            line-height: 50px;
            color: rgba(0, 0, 0, 0.75);
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
            margin-bottom: 10px;
          }
          p {
            line-height: 20px;
            color: rgba(0, 0, 0, 0.6);
            text-shadow: 0 2px 4px rgba(28, 31, 33, 0.1);
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
          }
        }
        .price-info {
          box-sizing: border-box;
          padding: 5px;
          box-sizing: border-box;
          width: 100%;
          height: auto;
          border-radius: 20px;
          margin: 10px auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
          .time-price {
            margin-bottom: 10px;
            text-align: center;
            width: 100%;
            font-size: 22px;
            color: #f01414;
            line-height: 32px;
            font-weight: 700;
          }
          .info-bar {
            width: 100%;
            display: flex;
            justify-content: center;
            span {
              font-size: 12px;
              color: #545c63;
              line-height: 24px;
              font-weight: 700;
              padding-right: 8px;
              &.nodistance {
                font-weight: 400;
                padding-right: 20px;
              }
            }
          }
          .btns {
            margin-top: 20px;
            .buy-btn {
              background: #f01414;
              border-radius: 28px;
              font-size: 12px;
              color: #fff;
              letter-spacing: 0;
              line-height: 24px;
              font-weight: 700;
              padding: 10px 28px;
              transition: all 0.3s;
              margin-right: 20px;
            }
            .addcart {
              background: rgba(240, 20, 20, 0.1);
              border-radius: 28px;
              font-size: 12px;
              color: #f20d0d;
              letter-spacing: 0;
              line-height: 24px;
              font-weight: 700;
              padding: 10px 28px;
              position: relative;
              transition: all 0.3s;
            }
          }
        }
        .nav-bar {
          display: none;
        }
      }
    }
  }
}
</style>
